<template>
  <div class="page">
    <m-header :title="type=='cz'?langText&&langText.rechargerecord:type=='tx'?langText&&langText.withdrawalsrecord:langText&&langText.redemptionrecord" :canback="Boolean(1)"> </m-header>
      <div class="body">

        <div class="box" :style="'height:'+(screenHeight-133.6)+'px;overflow:auto;'">

          <table v-if="type=='cz'" v-lazy-load="lazyLoad" >
            <tr>
              <th>{{langText&&langText.walletaddress}}</th>
              <th>{{langText&&langText.quantity}}</th>
              <th>{{langText&&langText.status}}</th>
              <th>{{langText&&langText.rechargetime}}</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index" >
              <td >
                <span class="i_top">{{item.wallet_addr}}</span>
              </td>
              <td>{{item.amount}}</td>
              <td>{{item.status_name}}</td>
              <td>{{item.createtime.substring(0,10)}}</td>
            </tr>
          </table>

          <table v-else-if="type=='tx'" v-lazy-load="lazyLoad" >
            <tr>
              <th>{{langText&&langText.type}}</th>
              <th>{{langText&&langText.quantity}}</th>
              <th>{{langText&&langText.walletaddress}}</th>
              <th>{{langText&&langText.status}}</th>
              <th>{{langText&&langText.cashwithdrawaltime}}</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index" >
              <td>{{item.type}}</td>
              <td >
                <span class="i_top">{{item.addr}}</span>
              </td>
              <td>{{item.amount}}</td>
              <td>{{item.status_name}}</td>
              <td>{{item.createtime.substring(0,10)}}</td>
            </tr>
          </table>

          <table v-else v-lazy-load="lazyLoad" >
            <tr>
              <th v-if="type=='usdt'">{{langText&&langText.usdt}}</th>
              <th v-else>{{langText&&langText.fc}}</th>
              <th v-if="type=='usdt'">{{langText&&langText.fc}}</th>
              <th v-else>{{langText&&langText.usdt}}</th>
              <th>{{langText&&langText.redemptiontime}}</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index" >
              <td  v-if="type=='usdt'">{{item.usdt}}</td>
              <td v-else>{{item.fc}}</td>
              <td  v-if="type=='usdt'">{{item.fc}}</td>
              <td v-else>{{item.usdt}}</td>
              <td>{{(item.exchange_time).substring(0,10)}}</td>
            </tr>
          </table>

        </div>

      </div>
    <m-load ref="load"></m-load>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import { MyTxt,BaseTxt } from "@/assets/commonjs/lan.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { Init, Base, Owner } from "@/server/server.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      allTxt:null,
      list:[],
      screenHeight: 667,
      type:null,
      langText:null,
      noMore: false,
      page:1
    }
  },
  computed: {
    ...mapGetters(["uid","userInfo","lang",'getLangId'])
  },
  created() {
      
  },
  mounted(){
    this.screenHeight = window.screen.availHeight || window.screen.height;
    this.initDate();
  },
  methods: {
      initDate(){
        this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
        this.allTxt = Object.assign({},MyTxt,BaseTxt)
        this.type = this.$route.query.type;
        if(this.type=='usdt'||this.type=='fc'){
          this.exchangeRecord();
        }else if(this.type=='tx'){
          this.getWithdrawalRecord();
        }else if(this.type=='cz'){
          this.getRechargeRecord();
        }
      },
      getRechargeRecord(){
        Owner.getRechargeRecord().then(res=>{
          if(res.code==1){
            this.list = res.data.record;
          }else{
            mui.toast(res.msg)
          }
        })
      },
      exchangeRecord(){
        Owner.exchangeRecord({page:this.page,num:10,type:this.type}).then(res=>{
          if(res.code==1){
            this.list = res.data.record;
          }else{
            mui.toast(res.msg)
          }
        })
      },
      getWithdrawalRecord(){
        Owner.getWithdrawalRecord({page:this.page,num:10}).then(res=>{
          if(res.code==1){
            this.list = res.data.record;
          }else{
            mui.toast(res.msg)
          }
        })
      },
    lazyLoad() {
      this.page = this.page + 1;
      if (!this.noMore) {
        this.exchangeRecord();
      }
    },
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // padding: @margin-primary;
  background-color: @bg-color;
  .box {
    width: 710px;
    margin-left: 20px;
    margin-top: 30px;
    text-align: center;
    border-radius: 10px;
    padding-left: 20px;
  }
  table{
    width: 670px;
    background-color: #fff;
    border-radius: 10px;
    th{
      height: 80px;
      // line-height: 80px;
      font-size:28px;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    tr{
      line-height: 60px;
      color: #999;
      &:first-child{
        border-bottom: 1px solid #ddd;
      }
    }
    .i_top{
      // width: 160px;
      // display: block;
      // width: 120px;
      width: 120px;
      width: 120px;
      display: inline-block;
      overflow: hidden;
      text-align: center;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>